<template>
  <div class="page-base-style">
    <el-form :label-width="labelWidth" label-position="top" class="component-base-style">
      <el-form-item label="产品名称">
        <el-input v-model="formData.productName" placeholder="默认带上,不可修改" disabled />
      </el-form-item>

      <el-row :gutter="16" class="component-base-style">
        <el-col :span="12">
          <el-form-item label="图纸">
            <el-input v-model="formData.drawing" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否自动解析">
            <el-radio-group v-model="formData.autoParse">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="零件名称">
            <el-input v-model="formData.partName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外部物料编码">
            <el-input v-model="formData.externalMaterialNo" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="图纸代号">
            <el-input v-model="formData.drawingCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="材质">
            <el-input v-model="formData.material" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="零件版本">
            <el-input v-model="formData.partVersion" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图纸净重">
            <el-input v-model="formData.drawingWeight" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="是否包含子件">
            <el-radio-group v-model="formData.includeSubparts">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-table :data="tableData" class="component-base-style" border>
        <el-table-column type="index" width="60" label="#" />
        <el-table-column prop="ExternalMaterialNo" label="物料编码（外部）" />
        <el-table-column prop="MaterialDescription" label="物料描述" />
        <el-table-column prop="Quantity" label="数量" />
        <el-table-column prop="TextureOfMaterial" label="材料" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger" @click="deleteRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const labelWidth = ref('150px');
const formData = ref({
  productName: '',
  drawing: '',
  autoParse: 1,
  partName: '',
  externalMaterialNo: '',
  drawingCode: '',
  material: '',
  partVersion: '',
  drawingWeight: '',
  includeSubparts: 1
});

const tableData = ref([
  { ExternalMaterialNo: '12345', MaterialDescription: '螺丝', Quantity: 10, TextureOfMaterial: '钢' },
  { ExternalMaterialNo: '67890', MaterialDescription: '螺母', Quantity: 20, TextureOfMaterial: '铜' }
]);

const deleteRow = (index) => {
  tableData.value.splice(index, 1);
};

const submitForm = () => {
  console.log('提交表单', formData.value);
};

const resetForm = () => {
  Object.assign(formData.value, {
    productName: '',
    drawing: '',
    autoParse: 1,
    partName: '',
    externalMaterialNo: '',
    drawingCode: '',
    material: '',
    partVersion: '',
    drawingWeight: '',
    includeSubparts: 1
  });
};
</script>

<style scoped>
.page-base-style {
  padding: 24px;
  background: #FFFFFF;
}
.component-base-style {
  margin: 8px;
}
</style>
